<template lang="html">
  <div id="charts">
    <div id="hp1" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
import co from 'co'
import echarts from 'echarts'
import {HttpResetClass } from 'vue-client'

let getData = function * (self) {
  // let s1 = 't.'
  // let s2 = 'u.'
  // self.replacestr(self.condition,s1)
  // self.replacestr(self.con,s2)
  let load = new HttpResetClass()
  load.load('POST','rs/sql/HandPlay',
  {data: {condition: self.condition}},
  {resolveMsg: null, rejectMsg: null})
  .then((res) => {
    let gasdata = []
    let pricedata = []
    let cint = 0
    let wint = 0
    let cyprice = 0
    let cnpprice = 0
    for (var i = 0; i < res.data.length; i++) {
      cint += res.data[i].c
      wint += res.data[i].w
      cyprice += res.data[i].oughtfee
      cnpprice += res.data[i].f_oughtfee
    }
    gasdata = [
      {name: '已抄表',value: cint},
      {name: '未抄表',value: wint}
    ]
    pricedata = [
      {name: '已交费',value: cyprice},
      {name: '未交费',value: cnpprice}
    ]
    self.set(gasdata,pricedata)
  })
}
export default {
  props: ['condition', 'tablename'],
 data () {
   return {
     xc: '',
     con:''
   }
 },
 methods: {
   set (gasdata,pricedata) {
     this.xc = echarts.init(document.getElementById('hp1'))
     this.xc.setOption({
       title : {
         text: '数量金额饼图',
         left: 'left'
       },
       tooltip : {
         trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
       },
       legend: {
         data: ['已抄表','未抄表','已交费','未交费']
       },
       calculable : true,
      series: [
        {
            name:'金额数据',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:pricedata
        },
        {
            name:'数量数据',
            type:'pie',
            radius: ['40%', '55%'],
            label: {
                normal: {
                    formatter: '{a}\n  {b}{c} {d}% ',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        a: {
                            color: '#999',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#aaa',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0
                        },
                        b: {
                            fontSize: 16,
                            lineHeight: 33
                        },
                        per: {
                            color: '#eee',
                            backgroundColor: '#334455',
                            padding: [2, 4],
                            borderRadius: 2
                        }
                    }
                }
            },
            data:gasdata
        }
    ]
     })
   },
   searchdata () {
     let getGen =getData(this)
     co(getGen)
   },
   replacestr (str,rstr) {
     if (str.indexOf(rstr) >= 0) {
       this.replacestr(str.replace(rstr, ''), rstr)
     } else {
       this.con = str
     }
   }
 },
 watch: {
   'condition' (val) {
      this.searchdata()
   },
   'tablename' (val) {
     this.searchdata()
   }
 },
 ready () {
   this.searchdata()
 }

}
</script>
<style lang="css">
#charts div{
  height: auto;
}
</style>
